import {observer} from 'mobx-react-lite';
import {Path, Svg} from 'react-native-svg';
import {useGlobalStore} from '../../mobx';
import {getColorStr} from '../../themes';
import {IconProps} from './types';

export const SvgRight = observer((props: IconProps) => {
  const {colorKey = 'color_4', ...rest} = props;
  const {theme} = useGlobalStore();
  return (
    <Svg width="21" height="20" viewBox="0 0 21 20" fill="none" {...rest}>
      <Path
        d="M7.72606 4.06802L7.72618 4.06788L7.73611 4.07706L13.7225 9.60798L14.1189 9.97415L13.7236 10.3415L7.74548 15.8972C7.69977 15.9451 7.68611 15.991 7.68471 16.0191C7.68351 16.043 7.68923 16.0675 7.71783 16.0961L7.7296 16.1079L7.74056 16.1204C7.75982 16.1424 7.79254 16.1598 7.83192 16.1617C7.86845 16.1635 7.89864 16.1517 7.92169 16.1286L7.92868 16.1217L7.93594 16.1149L13.9145 10.5913C14.0979 10.4053 14.1846 10.2035 14.1846 10.0078C14.1846 9.79176 14.0825 9.57184 13.9324 9.44054L13.9323 9.44068L13.9224 9.4315L7.93594 3.90058L7.90254 3.86971L7.88228 3.84271C7.87998 3.84189 7.87683 3.84095 7.87281 3.84012C7.86679 3.83889 7.8598 3.83812 7.85229 3.83812C7.83452 3.83812 7.80524 3.8423 7.77408 3.85417C7.74312 3.86596 7.72506 3.87965 7.71783 3.88688C7.69477 3.90994 7.68296 3.94013 7.68474 3.97666C7.68666 4.01604 7.70405 4.04876 7.72606 4.06802Z"
        fill={getColorStr(theme, colorKey)}
        stroke={getColorStr(theme, colorKey)}
      />
    </Svg>
  );
});
